<%-- 
  - Author: Abed Yaseen
  - Date: 02-Jan-2012
  - Copyright Notice: TRAKHEES
  - Description: form.jsp
 --%>
 <%@ include file="/WEB-INF/view/include.jsp"%>

    <div class="t_tmiddle-right">
    	<div id="tabs">
	      <ul id="TabHeader">
	        <li><a href="#EmployeeDetails"><spring:message code="header.employee_details" /></a></li>
	        <li><a href="#PassportDetails"><spring:message code="header.passport_details" /></a></li>
	        <li><a href="#PersonalDetails"><spring:message code="header.personal_details" /></a></li>
	        <li><a href="#AddressDetails"><spring:message code="header.address_details" /></a></li>
	        <li><a href="#Attachments"><spring:message code="header.attachments" /></a></li>
	        <li><a href="#Comments"><spring:message code="header.comments" /></a></li>
	      </ul>
	      <form:form modelAttribute="BackOfficeEmploymentVisaReviewerInfo" name="EmploymentVisaFrm"  id="EmploymentVisaFrm"  method="POST" class="t_form">
			<spring:hasBindErrors
						name="BackOfficeEmploymentVisaReviewerInfo">
							<script type="text/javascript">
								$(document).ready(
										function() {
											jAlert('error', '<li><form:errors path="*" delimiter="<li>"/>',
													'<spring:message code="label.errormessage" />');
										});
					</script>
		    </spring:hasBindErrors>
		  
				<%@include file="EmployeeDetailsTab.jsp" %>
				<%@include file="PassportDetailsTab.jsp" %>
				<%@include file="PersonalDetailsTab.jsp" %>
	       		<%@include file="AddressDetailsTab.jsp" %>
	       		<%@include file="AttachmentsTab.jsp" %>
				<%@include file="CommentsTab.jsp" %>
				
	        	<div id="backgroundPopup"></div>
	        	<input type="hidden" name="strApplicationId" value="${ backOfficeAdminReview.strApplicationId}" />
	        	<input type="hidden" name="strUserName" value="${backOfficeAdminReview.strUserName}" />
	        	<input type="hidden" name="strTaskId" value="${backOfficeAdminReview.strTaskId}" />
	        	<input type="hidden" name="strIncidentNo" value="${backOfficeAdminReview.strIncidentNo}" />
	        	<input type="hidden" name="strStepName" value="${backOfficeAdminReview.strStepName}" />
	        	<input type="hidden" name="processName" value="${backOfficeAdminReview.processName}" />
	        	<input type="hidden" name="initiatedBy" value="${backOfficeAdminReview.initiatedBy}" />
		 </form:form>
	      
       </div>
    </div>
    <!--Middle Right Close-->
<script>

/*submit decision variables for validation*/
var submAction = null;

function setAction(inaction){
	submAction = inaction;
	
	if(inaction =='cancel'){
		
		fancyConfirm('<spring:message code="message.cancel_confirmation_message" />'
				,'<spring:message code="button.No" />'
				,'<spring:message code="button.yes" />'
				, function(ret) {
					if(ret == true){
						//cancel
						var input = $("<input>").attr("type", "hidden").attr("name", "MainUserCancel").val("MainUserCancel");
						$('#EmploymentVisaFrm').append($(input));
						$('#EmploymentVisaFrm').submit();
						$.fancybox.showLoading();
					}
		});
	}
}
        var $tabs ;
        
        
		//Validation - Required fields
		$().ready(function() {

			
			$(".topnav").accordion({
				accordion:false,
				speed: 500,
				closedSign: '<img src=\'resources/images/common/close.jpg\' />',
				openedSign: '<img src=\'resources/images/common/open.jpg\' />'
			});
	
/*			$( "#EmploymentVisaFrm #issueDate,#EmploymentVisaFrm #expiryDate,#EmploymentVisaFrm #dateOfBirth" ).datepicker({
				showOn: "button",
				buttonImage: "resources/images/calender.jpg",
				dateFormat : 'dd/mm/yy',
				buttonImageOnly: true
			});
		
			$('select#employeeType,select#strPreviousNationality,select#strStatus').selectmenu({
					style:'dropdown', 
					menuWidth: 240,
					maxHeight: 250,
					format: addressFormatting
			});
			
			$('select#strCity,select#spokenLanguage2,select#strEmirate,select#strMedicalType').selectmenu({
					style:'dropdown', 
					menuWidth: 240,
					maxHeight: 250,
					format: addressFormatting
			});
			

			
			$('select#strCurrentVisaType,select#strCurentlyInUAE,select#spokenLanguage1').selectmenu({
				style:'dropdown', 
				menuWidth: 240,
				maxHeight: 250,
				format: addressFormatting
			});
	
			$('select#spokenLanguage3,select#qualification,select#strBirthPlace').selectmenu({
				style:'dropdown', 
				menuWidth: 240,
				maxHeight: 250,
				format: addressFormatting
			});
*/			
			if($('#strNationality').val() != "" && $('#strNationality').val() != null){
				updateCity();
			}
			
			if($('#strEmirate').val() != "" && $('#strEmirate').val() != null){
				updateEmirateCity();
			}
			
			$('#strNationality').change(function() {
	        	updateCity();
	    	});
			
			$.validator.addMethod(
				"dateRange", 
				function() {
							var issueDate = new Date($("#issueDate").val());
	        				var expiryDate = new Date($("#expiryDate").val());
	        				var today = new Date();
	        				return (issueDate < expiryDate && (expiryDate > today));
	   		 });
	   		 
			$("#EmploymentVisaFrm").validate({

				onfocusout:false,
				onkeyup:false,
				onclick: false,			
				rules : {
					//Employee Details
					adminComments : {
						required : {
							depends: function(element) {
					           return submAction == "reject";
					        }
						}
					}				
				},
				
				submitHandler: function (form) {
					blockPage();
					form.submit();
				},
				
				showErrors : function(errorMap, errorList) {
					
					var errors = '<ul>';
					var label;				
					if (errorList.length) {
						$.each(errorMap, function(name, value) {
							label = $("label[for='" + name + "']").html();
							label = value + '[' + label + ']';
							errors = errors + '<li>' + label + '</li>';
							

						});
						errors = errors + '</ul>';
						jAlert('error', errors, '<spring:message code="label.errormessage" />');
						return false;
					}
				}		
			});// end $("#EmploymentVisaFrm").validate

			$tabs = $("#tabs").tabs();	
			$('#TabHeader').removeClass('ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all');
			$('#TabHeader > li').removeClass('ui-state-default ui-corner-top ui-state-active ui-state-hover');
			$('#tabs').removeClass('ui-widget ui-widget-content ui-corner-all');
			
			$('#tabs').tabs({
				select : function(event, ui) {
					
					var selected = $tabs.tabs('option', 'selected'); // => 0
					var clicked = ui.index; // => 0
										
					if( selected > clicked )
						return true;
					
					var isValid = validate();// form validation returning true or false
					
					if(clicked == 6){
						//updateSummaryTab();
						//updateAttachmentsTab();
					}else if(clicked == 5){
						//updateAttachmentsTab();
					}
					return isValid;
				}
			});
			
	
			$('#EmployeeDetails-Next').click(function() { // bind click event to link			
				$tabs.tabs('select', 1);
				return false;
				//$('#EmploymentVisaFrm').submit();
			});
			
			$('#PassportDetails-Next').click(function() { // bind click event to link			
				$tabs.tabs('select', 2);
				return false;
			});
			
			$('#PersonalDetails-Next').click(function() { // bind click event to link			
				$tabs.tabs('select', 3);
				return false;
			});
			
			$('#AddressDetails-Next').click(function() { // bind click event to link			
				$tabs.tabs('select', 4);
				return false;
			});
			
			$('#Comments-Next').click(function() { // bind click event to link			
				$tabs.tabs('select', 5);
				return false;
			});
			
			$('#Attachments-Next').click(function() { // bind click event to link			
				$tabs.tabs('select', 6);
				return false;
			});
			
			//Prev Buttons
			$('#PassportDetails-Prev').click(function() { // bind click event to link			
				$tabs.tabs('select', 0);
				return false;
			});
			
			$('#PersonalDetails-Prev').click(function() { // bind click event to link			
				$tabs.tabs('select', 1);
				return false;
			});
			
			$('#AddressDetails-Prev').click(function() { // bind click event to link			
				$tabs.tabs('select', 2);
				return false;
			});
			
			$('#Comments-Prev').click(function() { // bind click event to link			
				$tabs.tabs('select', 3);
				return false;
			});
			
			$('#Attachments-Prev').click(function() { // bind click event to link			
				$tabs.tabs('select', 4);
				return false;
			});
			
			$('#SubmitBtn').click(function() { 		
				$('#EmploymentVisaFrm').submit();
			});
			
			$('#strPostNo').val('Auto Generated');

		});	
		
		function validate() {
				var selected = $tabs.tabs('option', 'selected'); // => 0		
					
				if(selected == 0)
				{
					return ($("#EmploymentVisaFrm").validate().element("#employeeType")
							&& $("#EmploymentVisaFrm").validate().element("#employeeSource")
							&& $("#EmploymentVisaFrm").validate().element("#strNameInPassport")
							&& $("#EmploymentVisaFrm").validate().element("#strOriginCity")
							&& $("#EmploymentVisaFrm").validate().element("#salary")
							&& $("#EmploymentVisaFrm").validate().element("#strFoodAllowance")
							&& $("#EmploymentVisaFrm").validate().element("#jobCode")
							&& $("#EmploymentVisaFrm").validate().element("#strPriority")
							&& $("#EmploymentVisaFrm").validate().element("#strGender")
							&& $("#EmploymentVisaFrm").validate().element("#strMedicalType")
							&& $("#EmploymentVisaFrm").validate().element("#strIDCardFlag")
							&& $("#EmploymentVisaFrm").validate().element("#rpPeriod")
							&& $("#EmploymentVisaFrm").validate().element("#strOtherAllowance")
							&& $("#EmploymentVisaFrm").validate().element("#strAccommodationAllowance")
							&& $("#EmploymentVisaFrm").validate().element("#strTransportation")
							&& $("#EmploymentVisaFrm").validate().element("#strNationality")
							&& $("#EmploymentVisaFrm").validate().element("#strReligion")
							&& $("#EmploymentVisaFrm").validate().element("#strMaritalStatus")
							&& $("#EmploymentVisaFrm").validate().element("#strBankGuranteeFlag")
							);
				}
				if(selected == 1)
				{
					return ($("#EmploymentVisaFrm").validate().element("#strPassportNo") 
							&& $("#EmploymentVisaFrm").validate().element("#strCountryOfIssue")
							&& $("#EmploymentVisaFrm").validate().element("#expiryDate")
							&& $("#EmploymentVisaFrm").validate().element("#strCityOfIssue")
							);
				}
				if(selected == 2)
				{
					return ($("#EmploymentVisaFrm").validate().element("#strFatherName") 
							&& $("#EmploymentVisaFrm").validate().element("#strMotherName")
							&& $("#EmploymentVisaFrm").validate().element("#dateOfBirth")
							&& $("#EmploymentVisaFrm").validate().element("#strBirthPlace")
							&& $("#EmploymentVisaFrm").validate().element("#qualification")
							&& $("#EmploymentVisaFrm").validate().element("#spokenLanguage1")
					);
				}
				
				if(selected == 3)
				{
					return ($("#EmploymentVisaFrm").validate().element("#strCurentlyInUAE") 
							&& $("#EmploymentVisaFrm").validate().element("#strAddressAbroad")
							);
				}
				
				if (selected == 5){
					
					var isMandatoryValid =($("#EmploymentVisaFrm").validate().element("#PassportCopy")
						&& $("#EmploymentVisaFrm").validate().element("#LetterFromCompany")
						&& $("#EmploymentVisaFrm").validate().element("#Photograph"));
						
					var isOptionalValid = true;
					var selectedOption = $('#EmploymentVisaFrm select#employeeSource option:selected').val();
					var medicalOption = $('#EmploymentVisaFrm select#strMedicalType option:selected').val();
					
					if(selectedOption == "0"){
						
						if(medicalOption == "I"){
							isOptionalValid = ($("#EmploymentVisaFrm").validate().element("#InsurancePaper"));
						}
					}else if(selectedOption == "1" || selectedOption == "3"){
					
						isOptionalValid = ($("#EmploymentVisaFrm").validate().element("#cancellationOrVisitCopy"));
						if(medicalOption == "I"){
							isOptionalValid = isOptionalValid && ($("#EmploymentVisaFrm").validate().element("#InsurancePaper"));
						}
					
					}else if(selectedOption == "2"){
					
						isOptionalValid = ($("#EmploymentVisaFrm").validate().element("#cancellationPaper"));
					
					}
					
					return (isMandatoryValid && isOptionalValid);
				
				}
			
			}
			


		 var addressFormatting = function(text){
			var newText = text;
			//array of find replaces
			var findreps = [
				{find:/^([^\-]+) \- /g, rep: '<span class="ui-selectmenu-item-header">$1</span>'},
				{find:/([^\|><]+) \| /g, rep: '<span class="ui-selectmenu-item-content">$1</span>'},
				{find:/([^\|><\(\)]+) (\()/g, rep: '<span class="ui-selectmenu-item-content">$1</span>$2'},
				{find:/([^\|><\(\)]+)$/g, rep: '<span class="ui-selectmenu-item-content">$1</span>'},
				{find:/(\([^\|><]+\))$/g, rep: '<span class="ui-selectmenu-item-footer">$1</span>'}
			];
			
			for(var i in findreps){
				newText = newText.replace(findreps[i].find, findreps[i].rep);
			}
			return newText;
		}
		
		function updateSummaryTab(){
		
		  	$("#EmploymentVisaFrm input[type=text]").each(function() {

		       		$('#Summary input#'+$(this).attr('id')).val(this.value);
		       		$('#Summary input#'+$(this).attr('id')).attr('disabled', true);

		    });
		    
		    $("#EmploymentVisaFrm select").each(function() {
		       		
		       		$('#Summary input#'+$(this).attr('id')).val($('#EmploymentVisaFrm select#'+$(this).attr('id')+ ' option:selected').val());
		       		$('#Summary input#'+$(this).attr('id')).attr('disabled', true);

		    });
		    
		    $("#EmploymentVisaFrm input[type=file]").each(function() {

		       		$('#Summary input#'+$(this).attr('id')).val(this.value);
		       		$('#Summary input#'+$(this).attr('id')).attr('disabled', true);

		    });
		    
		    $("#EmploymentVisaFrm textarea").each(function() {

		       		$('#Summary textarea#'+$(this).attr('id')).val($(this).val());
		       		$('#Summary textarea#'+$(this).attr('id')).attr('disabled', true);

		    });
				  	
		
		}
		
		function updateAttachmentsTab(){
				var selectedOption = $('#EmploymentVisaFrm select#employeeSource option:selected').val();
				var medicalOption = $('#EmploymentVisaFrm select#strMedicalType option:selected').val();
				
				$('label#cancellationOrVisitCopyLbl').removeClass("frm-req");
				$('input#cancellationOrVisitCopy').hide();
				$('input#cancellationOrVisitCopy').rules("add", { required: false });
				$('label#cancellationOrVisitCopyLbl').hide();
				
				$('label#cancellationPaperLbl').removeClass("frm-req");
				$('input#cancellationPaper').hide();
				$('input#cancellationPaper').rules("add", { required: false });
				$('label#cancellationPaperLbl').hide();
				
				$('label#InsurancePaperLbl').removeClass("frm-req");
				$('input#InsurancePaper').hide();
				$('input#InsurancePaper').rules("add", { required: false });
				$('label#InsurancePaperLbl').hide();
				
				if(selectedOption == "0"){
					
					if(medicalOption == "I"){
						$('input#InsurancePaper').show();
						$('input#InsurancePaper').rules("add", { required: true });
						$('label#InsurancePaperLbl').show();
						$('label#InsurancePaperLbl').addClass("frm-req");
					}
				}else if(selectedOption == "1" || selectedOption == "3"){
					
					$('input#cancellationOrVisitCopy').show();
					$('input#cancellationOrVisitCopy').rules("add", { required: true });
					$('label#cancellationOrVisitCopyLbl').show();
					$('label#cancellationOrVisitCopyLbl').addClass("frm-req");
					if(medicalOption == "I"){
						$('input#InsurancePaper').show();
						$('input#InsurancePaper').rules("add", { required: true });
						$('label#InsurancePaperLbl').show();
						$('label#InsurancePaperLbl').addClass("frm-req");
					}
				
				}else if(selectedOption == "2"){
				
					$('input#cancellationPaper').show();
					$('input#cancellationPaper').rules("add", { required: true });
					$('label#cancellationPaperLbl').show();
					$('label#cancellationPaperLbl').addClass("frm-req");
				}
			
		}
		
		function updateCity() {
		 
	 	$('#strOriginCity >option').remove();
	    $.getJSON("city.json",{contryCode:$("#strNationality").val()},
	    	 function(data) {
	    	
	    	$.each(data,function(key,city){ 		    		
	    		<c:choose>
	    			<c:when
	    				test='${requestScope.requestContextAttribute.locale.language == "ar"}'>
	    					var label = city.labelAr;
	    			</c:when>
	    			<c:otherwise>
	    					var label =  city.labelEn;
	    			</c:otherwise>
	   			</c:choose> 
	   				var id = city.id;
		    		if(id == '${BackOfficeEmploymentVisaReviewerInfo.strOriginCity}'){
		    			$('<option selected=selected/>').val(id).html(label).appendTo('#strOriginCity');
		    		}else{
		    			$('<option/>').val(id).html(label).appendTo('#strOriginCity');
		    		}
				   
				});
	    	
	    
	    	   });
	     
		  }
		
		function updateEmirateCity() {
		  	
		  	$('#strCity >option').remove();
	    	$.getJSON("emiratecity.json",{emirateCode:$("#strEmirate").val()},
	    	 function(data) {
	    	
	    	$.each(data,function(key,city){ 		    		
	    		<c:choose>
	    			<c:when
	    				test='${requestScope.requestContextAttribute.locale.language == "ar"}'>
	    					var label = city.labelAr;
	    			</c:when>
	    			<c:otherwise>
	    					var label =  city.labelEn;
	    			</c:otherwise>
	   			</c:choose> 
		    		var id = city.id;
		    		if(id == '${BackOfficeEmploymentVisaReviewerInfo.strCity}'){
		    			$('<option selected=selected/>').val(id).html(label).appendTo('#strCity');
		    		}else{
		    			$('<option/>').val(id).html(label).appendTo('#strCity');
		    		}
				   
				});
	    	
	    
	    	   });
		  
		  }
		
</script>

<!--[if IE 6]>
	<script>
		updateCity = function() {
		    $.getJSON("city.json",{contryCode:$("#strNationality").val()},
		    	 function(data) {
				    	$.each(data,function(key,city){ 		    		
				    		<c:choose>
				    			<c:when
				    				test='${requestScope.requestContextAttribute.locale.language == "ar"}'>
				    					var label = city.labelAr;
				    			</c:when>
				    			<c:otherwise>
				    					var label =  city.labelEn;
				    			</c:otherwise>
				   			</c:choose>
				   			var id = city.id;
				   			
				   			var selectedId = '${BackOfficeEmploymentVisaReviewerInfo.strOriginCity}';
				   			if(id == selectedId || (key == 0 && (selectedId=="" || selectedId==null))){
				    			$("#cuselFrame-strOriginCity .cuselText").html(label);
				    		}	
						});
		    	   });
		    
		}
		updateEmirateCity = function () {
		    $.getJSON("emiratecity.json",{emirateCode:$("#strEmirate").val()},
		    	 function(data) {
				    	$.each(data,function(key,city){ 		    		
				    		<c:choose>
				    			<c:when
				    				test='${requestScope.requestContextAttribute.locale.language == "ar"}'>
				    					var label = city.labelAr;
				    			</c:when>
				    			<c:otherwise>
				    					var label =  city.labelEn;
				    			</c:otherwise>
				   			</c:choose>
				   			var id = city.id;
				   			
				   			var selectedId = '${BackOfficeEmploymentVisaReviewerInfo.strCity}';
				   			if(id == selectedId || (key == 0 && (selectedId=="" || selectedId==null))){	
				    			$("#cuselFrame-strCity .cuselText").html(label);
				    		}
					    		
						});
		    	   });
		  
	   }
	</script>	
<![endif]-->